import http from '../scripts/request.js';

class Sidebar extends HTMLElement {
    constructor() {
        super();
        this.userInfo = http.getUserInfo();
        this.render();
        this.bindEvents();
    }

    render() {
        const defaultAvatar = '../assets/images/default_photo.jpg';
        
        this.innerHTML = `
            <div class="sidebar">
                <div class="profile-card">
                    <div class="avatar-container">
                        <img src="${this.userInfo?.photo || defaultAvatar}" alt="Student Avatar" class="student-avatar">
                    </div>
                    <div class="student-name">${this.userInfo?.name || 'Anonymous'}</div>
                    <div class="student-bio">${this.userInfo?.bio || 'No bio yet'}</div>
                    <div class="profile-actions">
                        <button class="action-btn edit-btn">Edit Profile</button>
                        <button class="action-btn logout-btn">Logout</button>
                    </div>
                </div>
                <nav class="nav-menu">
                    <a href="./student-profiles.html" class="nav-card ${this.isCurrentPage('student-profiles') ? 'active' : ''}">
                        <i>👤</i>
                        <span>Student Profiles</span>
                    </a>
                    <a href="./group-management.html" class="nav-card ${this.isCurrentPage('group-management') ? 'active' : ''}">
                        <i>👥</i>
                        <span>Group Management</span>
                    </a>
                    <a href="./index.html" class="nav-card ${this.isCurrentPage('noticeboard') ? 'active' : ''}">
                        <i>📋</i>
                        <span>Campus Noticeboard</span>
                    </a>
                </nav>
            </div>
        `;
    }

    bindEvents() {
        const logoutBtn = this.querySelector('.logout-btn');
        const editBtn = this.querySelector('.edit-btn');

        logoutBtn.addEventListener('click', () => {
            // 清除用户信息和token
            http.removeToken();
            localStorage.removeItem('userInfo');
            window.location.href = './login.html';
        });

        editBtn.addEventListener('click', () => {
            window.location.href = './edit-profile.html';
        });
    }

    isCurrentPage(pageName) {
        const currentPath = window.location.pathname;
        
        // Special handling for noticeboard related pages
        if (pageName === 'noticeboard') {
            return currentPath.endsWith('/') || 
                   currentPath.includes('index.html') || 
                   currentPath.includes('notice-detail.html') || 
                   currentPath.includes('post-notice.html');
        }
        
        // Other pages remain unchanged
        return currentPath.includes(pageName);
    }
}

customElements.define('app-sidebar', Sidebar);
document.getElementById('sidebar').innerHTML = '<app-sidebar></app-sidebar>';